<template>
	<navigator url="/pages/detail/index" hover-class="navigator-hover">
		<view class="box">
			<view class="content">
				<view class="img">
					<image :src="activity.img"></image>
				</view>
				<view class="info">
					<view class="name txt-cut2">
						{{activity.name}}
					</view>
					<view class="base">
						<view class="addr">
							{{activity.addr}}
						</view>
						<view class="date-money">
							<view class="date">
								{{activity.date}}
							</view>
							<view class="money">¥ {{activity.money}}</view>
						</view>
					</view>
				</view>
			</view>

			<view class="op">
				<view class="info">
					<view class="uni-icon ">&#xe609;</view> 932 <view class="space"></view> <view class="uni-icon ">&#xe611;</view> 324
				</view>
				<view class="button">马上参加</view>
			</view>
		</view>
	</navigator>
</template>

<script>
	export default {
		name: 'Activity2',
		props: {
			activity: Object
		},
		data: function () {
			return {

			};
		}
	}
</script>

<style scoped>
	.box {
		background: #fff;
		margin-bottom: 20px;
		width: 100%;
		padding: 20px 15px;
		box-sizing: border-box;
	}

	.content {
		display: flex;
	}

	.content image {
		width: 300px;
		height: 200px;
	}

	.content .info {
		flex: 1;
		flex-direction: column;
		padding: 10px 10px 0 25px;
	}

	.content .info .name {
		height: 120px;
	}

	.base {
		font-size: 25px;
		color: #888;
	}

	.content .date-money {
		display: flex;
		justify-content: space-between;
	}

	.date-money .money {
		color: #339933;
		font-size: 30px;
	}

	.op {
		display: flex;
		justify-content: flex-end;
	}

	.op>.button {
		display: inline-block;
		padding: 10px 15px;
		color: #0099CC;
		border: 1px solid #0099CC;
		margin: 20px 10px 0px 0px;
	}
	.op .info{
		font-size: 25px;
		color: #888;
		margin-top: 25px;
	}
	.space{
		display: inline-block;
		margin:0 15px
	}
</style>
